import axios from "axios";
import React, { useState,  } from "react";

//  子组件
const Child = () =>{
    console.log("子组件执行了");
    
    return <h1>
        Child
    </h1>
}
function App() {

    const [count,setCount] = useState(100)

    return <>
        <h1 id="title">App</h1>
        <button onClick={()=>setCount(count + 1)}>点击加1</button>
        <hr />
        <Child></Child>

        {/* 
            每次 count 发生变化的时候，都会导致 Child 自己被重新渲染，
            但是 count 的改变跟Child 组件没有任何关联。
            如果每次修改都重新渲染子组件，就会造成资源的浪费，所以要想办法解决让无关组件不需要重新渲染
        */}
    </>
        
}


export default App